<template>
    <div>
        <button type="button" @click="goPage">登录（管理员）</button>
        <button type="button" @click="goPage2">登录（员工）</button>
        <button type="button" @click="goHome">跳转到Home页</button>
        <button type="button" @click="goGetWay">跳转到Getway页--adime账号</button>
        <button type="button" @click="goGetWay">跳转到Getway页--edit账号</button>
        <button type="button" @click="routeError">路由故障</button>
        <div v-if="text">
            <h5>这里得内容是，由getaway页面中的“获取新内容”按钮触发后生成的</h5>
            {{ text }}
        </div>
    </div>
</template>

<script>
import { logins, logins2 } from '@/api/zStudyRequest.js'
import router from 'vue-router'
import { mapState } from 'vuex'
export default {
    name: 'login-page',
    computed: {
        ...mapState('a', ['text'])
    },
    methods: {
        async goPage() {
            let res = await logins('/login')
            console.log(res);
        },
        async goPage2() {
            let res = await logins2('/login2')
            console.log(res);
        },
        goHome() {
            let num = parseInt(Math.random() * 10)
            this.$router.push({ name: 'father', params: { id: num } })
        },
        goGetWay() {
            this.$router.push({ path: '/getway' })
        },
        routeError() {
            const { isNavigationFailure, NavigationFailureType } = router
            console.log(isNavigationFailure, NavigationFailureType);
            /*
                由于不知如何产生路由故障，故拓展学习下面的内容
                当跳转的页面没有匹配正确的路由路径时，跳转到 通配符 匹配的页面去，并且页面中拿到跳转过来时的路径
                两种带参都可以，开发时推荐使用 query 传递参数
            */
            // this.$router.push({path:'/joop',params:{ids: 90}})
            this.$router.push({ path: '/joop', query: { ids: 90 } })
        }
    }
}
</script>
<style scoped></style>